<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- top_banner区域开始 -->
    <div class="top_banner">
        <a href="#" class="top_banner_bg">
            <img src="images/top_banner.jpg" alt="">
        </a>
        <a href="#" class="close"></a>
    </div>
    <!-- top_banner区域结束 -->
    <!-- header区域开始 -->
    <header class="header">
        <div class="header_top">
            <a href="#" class="classify"><img src="images/classify.png" alt=""></a>
            <a href="#" class="ad"><img src="images/ad.gif" alt=""></a>
            <a href="#" class="login"><img src="images/login.png" alt=""></a>
        </div>
        <div class="search">
            <a href="#"></a>
            <i></i>
            <form>
                <input type="text" placeholder="进口爆款第2件半价">
            </form>
        </div>
    </header>
    <!-- header区域结束 -->
    <!-- banner区域 -->
    <div class="banner">
        <div class="wrapper">
            <ul>
                <li class="current"><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
            </ul>
            <ol>
                <li class="cur"><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
            </ol>
        </div>
    </div>
    <!-- banner区域结束 -->
    <!-- nav区域 -->
    <nav class="nav">
        <a href="#">
            <img src="images/nav_01.png" alt="">
            <p>苏宁秒杀</p>
        </a>
        <a href="#">
            <img src="images/nav_02.png" alt="">
            <p>苏宁超市</p>
        </a>
        <a href="#">
            <img src="images/nav_03.png" alt="">
            <p>苏宁拼购</p>
        </a>
        <a href="#">
            <img src="images/nav_04.png" alt="">
            <p>手机数码</p>
        </a>
        <a href="#">
            <img src="images/nav_05.png" alt="">
            <p>苏宁家电</p>
        </a>
        <a href="#">
            <img src="images/nav_06.png" alt="">
            <p>免费水果</p>
        </a>
        <a href="#">
            <img src="images/nav_07.png" alt="">
            <p>super会员</p>
        </a>
        <a href="#">
            <img src="images/nav_08.png" alt="">
            <p>签到有礼</p>
        </a>
        <a href="#">
            <img src="images/nav_09.png" alt="">
            <p>领券中心</p>
        </a>
        <a href="#">
            <img src="images/nav_10.png" alt="">
            <p>更多频道</p>
        </a>
    </nav>
    <!-- nav区域结束 -->
    <!-- 红包悬浮 -->
    <div class="red_packet">
        <img src="images/red_packet.gif" alt="">
    </div>
    <!-- 红包悬浮结束 -->
    <!-- 新人优惠 -->
    <div class="new_member">
        <img src="images/new_member.gif" alt="">
    </div>
    <!-- 新人优惠结束 -->
    <!-- 广告区域 -->
    <div class="last_ad">
        <a href="#">
            <img src="images/ad_bottom_01.gif" alt="">
        </a>
        <a href="#">
            <img src="images/ad_bottom_02.gif" alt="">
        </a>
        <a href="#">
            <img src="images/ad_bottom_03.gif" alt="">
        </a>
    </div>
    <!-- 广告区域开始 -->
    <!-- 新品首发 -->
    <div class="new_shop">
        <div class="shop_item">
            <a href="#" class="jump_page"></a>
            <!-- 标题 -->
            <h3 class="title">新品首发</h3>
            <!-- 描述 -->
            <p class="des">小米11 Pro开抢</p>
            <a href="#" class="img_a">
                <img src="images/phone01.webp" alt="">
            </a>
            <a href="#" class="img_a">
                <img src="images/phone02.webp" alt="">
            </a>
        </div>
        <div class="shop_item">
            <a href="#" class="jump_page"></a>
            <!-- 标题 -->
            <h3 class="title">苏宁拼购</h3>
            <!-- 描述 -->
            <p class="des">2人拼更实惠 全场包邮</p>
            <a href="#" class="img_a">
                <img src="images/pin01.webp" alt="">
            </a>
            <a href="#" class="img_a">
                <img src="images/pin02.webp" alt="">
            </a>
        </div>
        <div class="shop_item">
            <a href="#" class="jump_page"></a>
            <!-- 标题 -->
            <h3 class="title">新品首发</h3>
            <!-- 描述 -->
            <p class="des">小米11 Pro开抢</p>
            <a href="#" class="img_a">
                <img src="images/phone01.webp" alt="">
            </a>
            <a href="#" class="img_a">
                <img src="images/phone02.webp" alt="">
            </a>
        </div>
        <div class="shop_item">
            <a href="#" class="jump_page"></a>
            <!-- 标题 -->
            <h3 class="title">苏宁拼购</h3>
            <!-- 描述 -->
            <p class="des">2人拼更实惠 全场包邮</p>
            <a href="#" class="img_a">
                <img src="images/pin01.webp" alt="">
            </a>
            <a href="#" class="img_a">
                <img src="images/pin02.webp" alt="">
            </a>
        </div>
    </div>
    <!-- 新品首发结束 -->
    <!-- 为你推荐 -->
    <div class="recommend">
        <div class="title">
            <h3>为你推荐</h3>
            <p>精选频道</p>
        </div>
        <!-- 推荐商品 -->
        <div class="re_shop">
            <a href="#">
                <img src="images/re_shop01.webp" alt="">
                <p>苏宁国际</p>
            </a>
            <a href="#">
                <img src="images/re_shop02.webp" alt="">
                <p>苏宁Outlets</p>
            </a>
            <a href="#">
                <img src="images/re_shop03.png" alt="">
                <p>会员抢购</p>
            </a>
            <a href="#">
                <img src="images/re_shop04.png" alt="">
                <p>Super会员</p>
            </a>
        </div>
    </div>
    <!-- 为你推荐结束 -->
    <!-- 底部苏宁logo -->
    <div class="snlogo">
        <img src="images/snlogo.png" alt="">
    </div>
    <!-- 底部苏宁logo -->
    <!-- 底部导航 -->
    <div class="bottom_nav">
        <a href="#" class="bottom_login">
            <img src="images/bottom_login.png" alt="">
        </a>
        <div class="tools">
            <a href="#">
                <img src="images/bottom_nav01.png" alt="">
                <span>猜你喜欢</span>
            </a>
            <a href="#">
                <img src="images/bottom_nav02.png" alt="">
                <span>分类</span>
            </a>
            <a href="#">
                <img src="images/bottom_nav03.png" alt="">
                <span>排行榜</span>
            </a>
            <a href="#">
                <img src="images/bottom_nav04.png" alt="">
                <span>购物车</span>
            </a>
            <a href="#">
                <img src="images/bottom_nav05.png" alt="">
                <span>我的易购</span>
            </a>
        </div>
    </div>
    <!-- 底部导航结束 -->
</body>
</html>